import CodeView from '../../../shared/components/CodeView';
import Blockquote from '../../../shared/components/Blockquote';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import * as Base from './base/example';
import { getDisplayElementById } from '../../shared/helpers';

<div className="doc lead">
  Toast serves as a feedback & confirmation mechanism after the user takes an
  action.
</div>

<CodeView exampleOnly demoStyles="height: 4rem;">
  {getDisplayElementById(Base.default)}
</CodeView>

## About Toast

<Blockquote type="note" header="SLDS 2">
  To be compatible with the SLDS 2 default theme, Salesforce Cosmos, the toast <code>X</code> close button is set with <code>slds-button__icon_xx-small</code>.
</Blockquote>

### Accessibility

Toast should contain `role="alert"` on the container to signal to assistive technology that they require the user’s attention.

When the design uses multiple toasts simultaneously, set the role to `role="status"`. Historically, toasts would use the role of `alert`, but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of `status` is a polite live region, which does not clear the queue, reducing the risk of a missed toast message.

Use a span with `slds-assistive-text` to let the user know what type of notification it is.

## Base

<CodeView demoStyles="height: 4rem;">{getDisplayElementById(Base.default)}</CodeView>

## States

### Success

<CodeView demoStyles="height: 4rem;">
  {getDisplayElementById(Base.states, 'success')}
</CodeView>

### Warning

<CodeView demoStyles="height: 4rem;">
  {getDisplayElementById(Base.states, 'warning')}
</CodeView>

### Error

<CodeView demoStyles="height: 4rem;">
  {getDisplayElementById(Base.states, 'error')}
</CodeView>

### Error With Details

<CodeView demoStyles="height: 4rem;">
  {getDisplayElementById(Base.states, 'error-with-details')}
</CodeView>

## Examples

### Small Column

<CodeView demoStyles="height: 4rem;">
  {getDisplayElementById(Base.examples, 'small')}
</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="toast" type="component" />
